// utils/uploadHelper.js
import http from '@/http/index.js'
import { api } from '@/api/index.js'
import { ElMessage } from 'element-plus'

export function createUploader({
    onlyGetInputFiles = false,
    uploadApi = api.uploadFile,
    inputAccept = '*/*',
    multiple = false,
    onGetInputFiles = (files) => { },
    onUploadResult = (res, files) => { },
}) {
    const input = document.createElement('input')
    input.type = 'file'
    input.accept = inputAccept
    input.multiple = multiple

    // 核心：不要在这里直接触发 input.click()！
    input.onchange = (e) => handleFiles(e.target.files)

    function handleFiles(files) {
        if (!files || files.length === 0) {
            ElMessage.error('未选择文件')
            return
        }

        if (onlyGetInputFiles) {
            onGetInputFiles(files)
        } else {
            const formData = new FormData()
            Array.from(files).forEach(file => formData.append('file', file))

            http.post(uploadApi, formData, {
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then(res => {
                onUploadResult(res, files)
                if (res.code === 200) {
                    ElMessage.success(res.msg)
                } else {
                    ElMessage.error(res.msg || '上传失败')
                }
            }).catch(err => {
                console.error('上传失败:', err)
                ElMessage.error('上传失败')
            })
        }
    }

    return {
        triggerSelectFile() {
            input.click() // 只有主动调用时才弹出选择框
        },
        bindDragDropArea(el) {
            if (!el) return
            el.addEventListener('dragover', e => {
                e.preventDefault()
                el.classList.add('drag-over')
            })
            el.addEventListener('dragleave', () => {
                el.classList.remove('drag-over')
            })
            el.addEventListener('drop', e => {
                e.preventDefault()
                el.classList.remove('drag-over')
                const files = e.dataTransfer.files
                handleFiles(files)
            })
        }
    }
}

// 使用实例：1.支持点击上传；2.也支持拖拽上传
//   <div class="chooseFiles" ref="dragRef">
//     <el-button type="primary" @click="clickUpload">
//       点击上传文件
//     </el-button>
//     点击上方“选择文件”或将文件拖拽到此区域
//   </div>

// import { createUploader } from '@/utils/uploadHelper2.js'
// //拖拽上传组件
// const dragRef = ref(null)
// let uploader = null
// const initUploader = () => {
//     // 只创建 uploader，不触发选择框
//     uploader = createUploader({
//         onlyGetInputFiles: true,//可选，默认false，如果为true则只获取选中文件列表
//         uploadApi: '/uploadFile',// 可选，不传默认使用 api.uploadFile
//         inputAccept: '.xlsx,.xls', // 可选，默认为所有文件类型
//         multiple: true, // 可选
//         onGetInputFiles: (files) => {
//             console.log('onGetInputFiles文件列表:', files);
//         },
//         onUploadResult: (res, files) => {
//             console.log('onUploadResult上传结果:', res)
//             console.log('onUploadResult文件列表:', files);
//         },
//     })
//     // 方法2：通过绑定拖拽区域来上传
//     // 绑定拖拽区域（只绑定监听，不弹窗）
//     uploader.bindDragDropArea(dragRef.value)
// }
// // 点击上传按钮：👉 点击按钮后才弹出文件选择
// const clickUpload = () => {
//     // 方法1:通过按钮来触发文件弹窗选择文件上传
//     uploader.triggerSelectFile()
// }
// onMounted(() => {
//     //初始化上传组件
//     initUploader()
// })